
<template>
  <div class="">
    <el-card>
      <el-form ref="input" :inline="true" :data="page" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="page.keyword" placeholder="关键字" />
        </el-form-item>
        <el-form-item />
        <el-button
          type="primary"
          class="right"
          @click="onSearch"
        >搜索</el-button>
        <el-button type="" class="right" @click="clear">清除</el-button>
      </el-form>
      <el-alert :title="`数据共${total}`" type="info" show-icon />
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="questionType" label="题型" width="100" :formatter="questionType" />
        <el-table-column width="180" label="题目编号">
          <template v-slot="scope">
            <span v-for="(item,index) in scope.row.questionIDs" :key="index" @click="handleOpen(scope.row)">
              {{ item.number }}
            </span>
          </template> </el-table-column>
        <el-table-column prop="addTime" label="录入时间" />
        <el-table-column prop="totalSeconds" label="答题时间" />
        <el-table-column prop="accuracyRate" label="正确率" />
        <el-table-column prop="userName" label="录入人" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              size="mini"
              @click="handleOpen(row)"
            />
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              size="mini"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="deleteRandoms(row)"
            />
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              size="mini"
              @click="addChoice(row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-sizes="[20, 30, 40]"
        :page-size="page.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <questions-preview-tag :data="questionData" />
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import questionsPreviewTag from '../components/questions-preview-tag.vue'
export default {
  components: { questionsPreviewTag },
  data() {
    return {
      dialogVisible: false,
      page: {
        page: 1,
        pagesize: 20,
        keyword: undefined
      },
      questionData: {},
      tableData: [],
      total: 0
    }
  },
  created() {
    this.getRandoms()
  },
  methods: {
    questionType(type) {
      if (type.questionType === '1') {
        return '单选'
      } else if (type.questionType === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    clear() {
      this.page.keyword = ''
      this.getRandoms()
    },
    async deleteRandoms(data) {
      try {
        await this.$confirm('确认删除？')
        console.log(data)
        await removeRandoms(data)
        console.log(1)
        this.$message.success('删除成功')
        this.getRandoms()
      } catch (error) {
        console.log(error)
      }
    },
    async getRandoms() {
      const { data } = await randoms(this.page)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    async onSearch() {
      console.log(this.page)
      this.getRandoms()
      // try {
      //   await randoms(this.page)
      // } catch (e) {
      //   console.log(e)
      // }
    },
    handleSizeChange(val) {
      this.page.pagesize = val
      this.getRandoms()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getRandoms()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    async handleOpen(row) {
      try {
        console.log(row)
        this.dialogVisible = true
        const res = await detail({ id: row.questionIDs[0].id })
        this.questionData = res
        console.log(this.questionData)
      } catch (error) {
        console.log(error)
      }
    },
    async addChoice(data) {
      data.choiceState = 1
      try {
        await this.$confirm('确认加入精选题库？')
        this.$message.success('加入成功')
        this.$router.push('choice')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.right {
  float: right;
  margin-right: 10px;
}
.page {
  float: right;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
